import { Component, OnInit } from '@angular/core';
import { HttpRequest } from "../../../service/httpRequest";

import * as echarts from 'echarts';

@Component({
  selector: 'chart-fault',
  template: `
  <p>
  <span>设备故障台数</span>：
  <span>{{faultData[0]}}台</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <span>设备未异常台数</span>：
  <span>{{faultData[1]}}台</span>
</p>
<div id="fault" style="height: 260px;font-size:12px;"></div>
  `
})
export class FaultComponent implements OnInit {

  option;
  myFault:any;
  faultData:Array<number> = [0,0];

  constructor(private httpRequest:HttpRequest) { }

  ngOnInit() {
    this.myFault = echarts.init(document.getElementById('fault'));
    this.paintFault();
  }

  paintFault(){
    let ti_cn = "设备故障占比";
    let suti_cn = "设备故障中占设备总数的比例";
    let na_cn = "占比";
    this.httpRequest.sendGet('stat/gzzb').subscribe(res => {
      this.faultData = res;
      let tdata_cn = [
        {name:'设备故障中',value:res[0],color:'rgb(241, 92, 128)'},
        {name:'设备正常',value:res[1],color:'rgb(124, 181, 236)'}];
        this.fault(ti_cn,suti_cn,na_cn,tdata_cn);    
    },err => console.log(err));
  }

  fault(ti,suti,na,data){
    this.option = {
      title: {
        text: ti,
        subtext: suti,
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{b} <br/>{a} : {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: [data[0]['name'], data[1]['name']]
      },
      series: [{
        type: 'pie',
        name: na,
        radius: '55%',
        center: ['50%', '60%'],
        data: data,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
          normal: {
            label:{
              show: true,
//	                            position:'inside',
              formatter: '{b} : ({d}%)'
            }
          },
        }
      }],
      color:['#F05A82','#78B4E6']
    };
    this.myFault.setOption(this.option);
  }


}
